<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/assets/css/bootstrap.css">
    <title>我的选课记录- 选修课报名系统</title>
    <style>
        .table th, .table tr, .table td {
            border: 1px solid #CCCCCC !important;
        }
        .table tr, .table td {
            height: 80px;
            text-align: center;
        }
        .table th {
            line-height: 80px !important;
            padding: 0 !important;
            text-align: center;
        }
    </style>
</head>
<body class="col-lg-10 col-md-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-xs-offset-1">
    <nav class="navbar navbar-inverse ">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">选修课报名系统</a>
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">选课中心</a></li>
                    <li class="active"><a>我的选课</a></li>
                    <li><a href="/changePassword">修改密码</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a>欢迎你，<%= sname %> (<%= sid %>)</a></li>
                    <li><a href="/exitLogin">退出登录</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <h2>我的选课</h2>
    <hr>
    <div class="data">
        <table class="table table-hover">
            <tr>
                <th style="width: 80px" class="text-center">课程编号</th>
                <th style="width: 140px" class="text-center">课程名</th>
                <th style="width: 80px" class="text-center">上课时间</th>
                <th style="width: 80px" class="text-center">课程人数</th>
                <th style="width: 80px" class="text-center">可报年级</th>
                <th style="width: 80px" class="text-center">上课老师</th>
                <th style="width: 80px">课程简介</th>
                <th style="width: 80px">操作</th>
            </tr>
        </table>
    </div>
</body>
</html>
<script src="/assets/js/jquery-1.8.3.min.js"></script>
<script>

    $(function () {

        var stu_cou = '<%= courses %>'
        if (!!stu_cou) {   //表示传过来的courses不为空的时候
            var stu_cou_arr = stu_cou.split(',')
            stu_cou_arr.forEach(function (cid) {
                //分别查询每个课程号的详细信息
                $.ajax({
                    url: '/course/' + cid,
                    type: 'propfind',
                    success ({ rows }) {
                        var tr = `
                            <tr>
                                <td>${rows.cid}</td>
                                <td>${rows.cname}</td>
                                <td>${rows.dayofweek}</td>
                                <td>${rows.number}</td>
                                <td>${rows.allow}</td>
                                <td>${rows.teacher}</td>
                                <td>${rows.briefintro}</td>
                                <td><input type="button" class='btn btn-danger' data-cid='${rows.cid}' value='退报' /></td>
                            </tr>
                        `;
                        $('.table').append(tr);
                    }
                })
            })
        }else {
            $('.data').empty().html('你还没有报名任何课程，赶紧去选报你喜欢的课程吧！')
        }

        $('.table').delegate('.btn', 'click', function () {
            if (confirm('你确定要退报该课程吗？'))
                $.ajax({
                    url: '/selectCourse',
                    type: 'post',
                    data: {
                        cid: $(this).data('cid')
                    },
                    success(data) {
                       if (data.result === 0) {
                            alert('退报成功')
                           window.location.reload()
                       }else {
                           alert('退报失败')
                       }
                    }
                })
        })

    })

</script>